<template>
  <div class="top-nav">
    <van-nav-bar :border="false">
      <template #title>
        <div class="nav-title">{{title}}</div>
      </template>
      <van-icon
        name="arrow-left"
        slot="left"
        color="#fff"
        v-show="!$route.meta.hideLeftArrow"
        @click="goBack"
      ></van-icon>
      <van-icon
        name="bars"
        slot="right"
        color="#fff"
        class="filter"
        v-if="$route.name === 'index'"
        @click.passive="show = !show"
      ></van-icon>
      <van-button
        type="default"
        slot="right"
        size="large"
        color="transparent"
        @click="saveEduInfo"
        v-if="$route.name === 'myEducation'"
      >
        {{ $t("save") }}
      </van-button>
    </van-nav-bar>
    <van-popup round
               v-model="show"
               position="top"
               :style="{ height: '60%' }"
               closeable
               close-icon="close"
    >
      <div class="pannel">
        <div class="type_price">
          <div class="wishPrice">
            {{ $t("filters.expectedDollar") }}
            <span>&yen;&nbsp;{{ this.expectedDollar }}</span>
          </div>
          <van-slider
            v-model="expectedDollar"
            :min="5"
            :max="30"
            bar-height="4px"
            active-color="#03A9F4"
            inactive-color="#84B4FF"
            :step="5"
          ></van-slider>
        </div>
        <div class="type_run">
          <div class="wishRun">{{ $t("filters.expressBrand") }}</div>
          <div class="allType" @click.passive="toggleClassStyle">
            <span
              v-for="(item, index) in expressType"
              :key="index"
              :data-index="index"
              >{{ item }}
            </span>
          </div>
        </div>
        <div class="type_Date">
          <div class="dateTitle">{{ $t("expectedTime") }}</div>
          <div class="datechoice" @click.passive="onlyTimes" ref="choice">
            <span
              v-for="(item, index) in finishDate"
              :key="index"
              :data-index="index"
              >{{ item }}</span
            >
          </div>
        </div>
        <div class="filter_btn">
          <button @click.passive="filterData">
            {{ $t("search") }}
          </button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { NavBar, Icon, Popup, Slider, Button } from 'vant';
import expressType from '@/config/data/express-brand.json';
import { mapState, mapMutations } from 'vuex';
import 'vant/lib/nav-bar/style/less';
import 'vant/lib/popup/style/less';
import 'vant/lib/slider/style/less';

export default {
    name: 'my-navBar',
    components: {
        [NavBar.name]: NavBar,
        [Icon.name]: Icon,
        [Popup.name]: Popup,
        [Slider.name]: Slider,
        [Button.name]: Button
    },
    props: ['msg'],
    data () {
        return {
            show: false,
            expressType,
            expectedDollar: 5,
            expectedExpress: undefined,
            expectedTime: '',
            finishDate: ['上午', '下午', '晚上', '不限']
        };
    },
    methods: {
        toggleClassStyle (event) {
            if (event.target.nodeName === 'SPAN') {
                const nodesChildren = event.target.parentNode.children;
                event.target.classList.toggle('active');
                this.expectedExpress = _.filter(nodesChildren, value => value.className);
            }
        },
        // 筛选订单
        filterData () {
            this.show = false;
            const temparray = [];
            _.forEach(this.expectedExpress, value => temparray.push(this.expressType[value.dataset.index]));
            // 拿到条件值向后端查找需要的数据
            this.$api.orderApi
                .findSpecified({
                    orderPrice: this.expectedDollar,
                    orderType: temparray.length ? temparray : '',
                    estimatedTimeofCompletion: this.expectedTime === '3' ? '' : this.finishDate[this.expectedTime]
                })
                .then(res => {
                    if (res.code === 2020) {
                        this.simpleAssignment({ state: 'filterOrderData', value: res.data });
                    } else {
                        this.simpleAssignment({ state: 'filterOrderData', value: [] });
                    }
                })
                .catch(err => {
                    throw err;
                });
        },
        onlyTimes (event) {
            if (event.target.nodeName === 'SPAN') {
                this.$util._clearClassName(this.$refs.choice);
                event.target.classList.add('activeSpan');
                this.expectedTime = event.target.dataset.index;
            }
        },
        goBack () {
            this.$router.back(-1);
        },
        saveEduInfo () {
            // 如果tempEducationInfo的值为空，则直接返回路由，无需发起多余的http请求
            if (_.isEmpty(this.tempEducationInfo)) {
                this.$router.go(-1);
            } else {
                this.$store.commit({
                    type: 'clickeDbtn',
                    that: this,
                    success: function () {
                        this.$util.loadingToast();
                        // 持久化到数据库
                        this.$api.educationApi
                            .updateEduInfo({ eduData: this.tempEducationInfo })
                            .then(() => {
                                this.$util.successToast();
                                this.$router.back(-1);
                            })
                            .catch(error => {
                                this.$util.failToast(error.message);
                            });
                    },
                    error: function () {
                        this.$util.failToast(this.$t('errorMessage.educationFailure'));
                    }
                });
            }
        },
        ...mapMutations(['simpleAssignment', 'resetStatus'])
    },
    computed: {
        ...mapState(['educationInfo', 'tempEducationInfo', 'title'])
    }
};
</script>

<style scoped lang="less" src="./less/navbar.less"></style>
